<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- input 添加 -->
        <div id="top">
            <input type="text" v-model="iptVal">
            <button @click="addTodo">添加</button>
        </div>
        <!-- todos -->
        <div id="contentt">
            <ul>
                <li v-for="(item,index) in todos">
                    {{item.text}}
                    <!--      传入一个当前下标，来删除当前节点 -->
                    <button @click="delTodo(index)">删除</button>
                </li>
            </ul>
        </div>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
    /*用组件的方法实现在先在input中输入内容点击添加按钮可在arr后添加，点击删除可删除内容*/
        let vm=new Vue({
            el:"#app",
            data:{
                iptVal:"",
                todos:[
                    {id:1,text:"吃饭"},
                    {id:2,text:"睡觉"},
                    {id:3,text:"打豆豆"},
                ]
            },
            methods:{
                // 添加
                addTodo:function(){
                    let iptVal=this.iptVal;
                    if(!iptVal){// 当输入为空时，提示
                        alert("输入不能为空！");
                        return false;
                    };
                /*Vue对数组方法进行重写 使它可以进行视图响应
                    'push',
                    'pop',
                    'shift',
                    'unshift',
                    'splice',
                    'sort',
                    'reverse' 
                */
                    this.todos.push({
                        id:Date.now(),// 用时间戳自成一个id
                        text:iptVal,
                    })
                },
                // 删除
                delTodo:function(index){
                    // .splice(index,num)：从当前下标index节点处删除；num:删除个数
                    this.todos.splice(index,1);
                }
            }


        })












    </script>
</body>
</html>